<script lang="ts" name="gaodemap">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
// 高德地图
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity'

// 高德地图
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import { SetUp } from "@element-plus/icons-vue";

const router = useRouter();
type EChartsOption = echarts.EChartsOption;

export default defineComponent({
  name: "gaodemap",

  // 简单功能的实现
  setup() {
    const map = shallowRef(null);

    // 初始化地图
    function initMap() {
      // 测试
      
      // 测试
      AMapLoader.load({
        key: "2ac421ab03c5bc645190f4b0a8aa97fd", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale", //工具条，控制地图的缩放、平移等
          "AMap.ToolBar", //比例尺，显示当前地图中心的比例尺
          "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
          "AMap.HawkEye", //鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("map", {//设置地图容器id
            zoom: 14, //初始化地图层级
            viewMode: "3D", //是否为3D地图模式
            center: [114.522656,38.040616], //初始化地图中心点位置
            dragEnable: true, //禁止鼠标拖拽
            scrollWheel: true, //鼠标滚轮放大缩小
            doubleClickZoom: true, //双击放大缩小
            keyboardEnable: true, //键盘控制放大缩小移动旋转
          });
          map.setDefaultCursor("pointer"); //使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
          map.addControl(new AMap.Scale()); //异步同时加载多个插件
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Geolocation({
            offset: [19, 90],
          }));

          // 工具样式修改
          

          let HawkEye = new AMap.HawkEye({
            position: "LT", //控件停靠位置（LT/RT/LB/RB）
          });
          map.addControl(HawkEye);

          map.add(
            new AMap.Marker({
              position: map.getCenter(),
            })
          );
          // map.add(marker); // 地图添加标记
          // AMapLoader.load({
          //   //可多次调用load
          //   plugins: ["AMap.MapType"],
          // })
          //   .then((AMap) => {
          //     map.addControl(new AMap.MapType());
          //   })
          //   .catch((e) => {
          //     console.error(e);
          //   });
          // 显示地图层级与中心点信息
          function logMapinfo() {
            let zoom = map.getZoom(); //获取当前地图级别
            let center = map.getCenter(); //获取当前地图中心位置
            // document.querySelector("#map-zoom").innerText = zoom;
            // document.querySelector("#map-center").innerText = center.toString();
          }
          //绑定地图移动与缩放事件
          map.on("moveend", logMapinfo);
          map.on("zoomend", logMapinfo);
          //为地图注册click事件获取鼠标点击出的经纬度坐标
          // map.on("click", function (e) {
          //   document.getElementById("lnglat").value =
          //     e.lnglat.getLng() + "," + e.lnglat.getLat();
          // });
          let infoWindow = new AMap.InfoWindow({
            //创建信息窗体
            isCustom: false, //使用自定义窗体
            anchor: "top-right", //信息窗体的三角所在位置
            content: `信息窗体`, //信息窗体的内容可以是任意html片段
            offset: new AMap.Pixel(16, -45),
          });
         // infoWindow.open(map, [114.522656,38.040616]); //填写想要窗体信息指示的坐标
        })
        .catch((e) => {
          console.log(e);
        });
    }

    // 调用地图初始化函数：onMounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法
    onMounted(() => {
      initMap();
    });

    return { map, initMap };
  },


})

</script>

<template>
  <div id="map"></div>
  <div class="info">
      <span class="info-a">获取地图级别与中心点坐标</span>
      <span class="info-b">当前级别：<span id="map-zoom">11</span></span>
      <span class="info-c">当前中心点：<span id="map-center">121.498586,31.239637</span></span>
    </div>
</template>

<style  lang="scss" scoped>
#map {
  // margin: 50px auto;
  width: 100%;
  height: 100%;
  color: #666;
}
.info-a {
  margin-left: 30px;
}
.info-b {
  margin-left: 30px;
}
.info-c {
  margin-left: 30px;
}

.amap-ui-ctrl-layer-base-item p {
  color: aqua;
}
</style>
